<template>
<ul class="move-box-mod" @touchstart="touchstartFn" @touchend="touchendFn">
	<div class="move-box-c" :style='moveStyle'>
		<div class="move-c-item">
			<slot name='one'></slot>
		</div>
		<div class="move-c-item">
			<slot name='two'></slot>
		</div>
	</div>
	<div class="move-box-t">
		<span class="move-t-item" :class="{'active': moveCurrent == 1}"></span>
		<span class="move-t-item" :class="{'active': moveCurrent == 2}"></span>
	</div>
</ul>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
let moveCurrent = ref(1);
let startPos1;

const moveStyle = computed(() => {
	let moveNun = `translateX(-${moveCurrent.value-1}00%)`;
	return {
		transform: moveNun,
	}
});
const touchstartFn = (event) => {
	let touch = event.targetTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
	startPos1 = {
		x: touch.pageX,
		y: touch.pageY,
	};//取第一个touch的坐标值
}
const touchendFn = (event) => {
	let touch = event.changedTouches[0];//touches数组对象获得屏幕上所有的touch，取第一个touch
	let startPos2 = {
		x: touch.pageX,
		y: touch.pageY,
	};
	let errNum = startPos1.x - startPos2.x;
	if(errNum > 50) {//右移
		moveCurrent.value = 2;
	}else if(errNum < -50) {//左移
		moveCurrent.value = 1;
	}
	console.log(startPos1, startPos2, errNum);
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.move-box-mod{ position: relative; height: 1.6rem; width: 100%; overflow: hidden;}
.move-box-mod .move-box-c{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.6s;}
.move-box-mod .move-c-item{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.move-box-mod .move-c-item:nth-child(2n) { left: 100%; }
.move-box-mod .move-box-t{ position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }
.move-box-mod .move-t-item{ display: inline-block; vertical-align: top; width: 0.05rem; height: 0.05rem; background-color: #CCC; margin: 0 2px; border-radius: 50%;}
.move-box-mod .move-t-item.active{ background-color: #fa2c19; }
</style>